<template>
  <div class="online" ref="online_chat">
    <public :title="title" class="top"></public>
    <div class="online-service">
      <OnlineChat v-for="(item,idx) in chatList" :key="idx" :char-list="item" :user-info="userInfo"></OnlineChat>
    </div>
    <div class="online-bottom">
      <van-search v-model="value" show-action @search="onSearch" shape="round" background="#f3f3f3">
        <template #action>
          <van-button @click="onSearch" type="info" round>发送</van-button>
        </template>
        <template #left-icon>
          <span></span>
        </template>
      </van-search>
    </div>
  </div>
</template>

<script>
import Public from "@/components/public/Public";
import OnlineChat from "@/components/user/children/OnlineChat";
export default {
  data() {
    return {
      title: "专属客服",
      value: "",
      chatList: [
        {
          content: " 本客服所有服务皆为虚拟服务，不接受投诉举报，一切都以沙雕为主，请大家对自己的行为负责，祝大家能拥有一次愉快的体验。",
          date: new Date().toLocaleString(),
          isUser: false
        }
      ],
      userInfo: {}
    };
  },
  watch: {
    chatList() {
      this.$nextTick(function() {
        document.documentElement.scrollTop = document.body.scrollHeight;
      });
    }
  },
  methods: {
    onSearch() {
      if (this.value.length === 0) return;

      
      let ipVal = this.value;
      this.value = "";
      this.pushObj(ipVal, true);
      if (/再见/g.test(ipVal)) {
        this.title = "对方正在输入...";
        let content = "好的,再见,小老弟";
        setTimeout(() => {
          this.pushObj(content, false);
          this.title = "专属客服";
        }, 2000);
      }else if (/撩/g.test(ipVal)) {
        this.title = "对方正在输入...";
        let content = "来呀,宝贝☆";
        setTimeout(() => {
          this.pushObj(content, false);
          this.title = "专属客服";
        }, 2000);
      }
      else if (/快/g.test(ipVal)) {
        this.title = "对方正在输入...";
        let content = "枫娣速达";
        setTimeout(() => {
          this.pushObj(content, false);
          this.title = "专属客服";
        }, 2000);
      } 
      else if (/1/g.test(ipVal)) {
        this.title = "对方正在输入...";
        let content = "你亭亭玉立冰清玉洁沉鱼落雁国色天香花容月貌金枝玉叶闭月羞花倾国倾城的爹正在赶来的路上。";
        setTimeout(() => {
          this.pushObj(content, false);
          this.title = "专属客服";
        }, 2000);
      } 
       else if (/退货/g.test(ipVal)) {
        let content = "你见过泼出去的水,还能收回来的吗?";
        this.pushObj(content, false);
      } else if (/聊天/g.test(ipVal)) {
        let content = "您想聊什么";
        this.pushObj(content, false);
      } else if (/好/g.test(ipVal)) {
        this.title = "对方正在输入...";
        let content = "哟 小老弟你好啊 如需人工服务请按1";
        setTimeout(() => {
          this.pushObj(content, false);
          this.title = "专属客服";
        }, 2000);
      } else {
        let content = "无法帮你解决这个问题,3秒后帮您寻找其他解决方法";
        this.pushObj(content, false);
        setTimeout(() => {
          document.location.href = "https://www.baidu.com/s?wd=" + ipVal;
        }, 3000);
      }
    },
    aaa() {
      console.log(111);
    },
    pushObj(content, bool) {
      let obj = {
        content,
        date: new Date().toLocaleString(),
        isUser: bool
      };
      let newChatList = JSON.parse(localStorage.getItem("newChatList")) || [];
      newChatList.push(obj);
      localStorage.setItem("newChatList", JSON.stringify(newChatList));
      this.chatList.push(obj);
      
    }
  },
  components: {
    Public,
    OnlineChat
  },
  created() {
    // console.log(this.chatList);
    this.chatList = this.chatList.concat(
      JSON.parse(localStorage.getItem("newChatList")) || []
    );
    if (JSON.parse(localStorage.getItem("userInfo")) === null) {
      this.userInfo = {};
    } else {
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    }
  }
};
</script>

<style lang="less" scoped>
.top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background: #fff;
  z-index: 999;
}
p {
  margin: 0;
}
.online {
  padding-top: 46px;
  padding-bottom: 54px;
  .online-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    .van-search__content {
      background: #fff;
    }
    .van-button {
      height: 34px;
      line-height: 34px;
    }
  }
  .online-service {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>